<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <title>Development Team</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>

<div>
    <nav class="navbar navbar-light navbar-expand-md">
        <div class="container">
            <a class="navbar-brand" href="#" style="color: #EBEBEB;">Mango Valley Company Inc.</a>
        </div>
    </nav>
</div>

<div class="container">

    <div class="accordion" id="accordion-team">

        <header>
            <div class="card">
                <h6 class="shadow-sm card-header">
                    <button type="button" class="btn btn-link text-white"
                            data-toggle="collapse"
                            data-target="#section-team">
                        Equipo de Desarrollo
                    </button>
                </h6>
            </div>
        </header>

        <div id="section-team" class="row collapse" data-parent="#accordion-team" style="margin-top: 10px;">
            <div class="col">
                <div class="card-columns text-left d-md-flex justify-content-md-center align-items-md-center">

                    <!-- Button Slider Prev Section I -->
                    <a class="carousel-control-prev d-none d-sm-flex" style="transform: translateX(-10px)"
                       onclick="prevSliderSectionI()">
                        <span class="carousel-control-prev-icon"></span>
                    </a>

                    <!-- Slider One Section I -->
                    <div id="slider-one-section-I" class="card shadow-sm col-md-5 col-sm-10">
                        <img class="card-img-top w-100 d-block shadow-lg rounded-circle" src="assets/img/Blue.svg"
                             height="150" width="100" style="max-width: 150px; margin: 10px auto 0 auto">

                        <div class="card-body">
                            <h4 class="text-center card-title">Joan Buriticá</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                            <a class="card-link d-lg-flex justify-content-lg-end" href="#modal-joan"
                               data-toggle="modal">Más Detalles ...</a></div>
                    </div>

                    <!-- Slider Two Section I -->
                    <div id="slider-two-section-I" class="card shadow-sm col-md-5 col-sm-10">
                        <img class="card-img-top w-100 d-block shadow-lg rounded-circle" src="assets/img/Green.svg"
                             height="150" width="100" style="max-width: 150px; margin: 10px auto 0 auto">
                        <div class="card-body">
                            <h4 class="text-center card-title">Jessica Mazuera</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                            <a class="card-link d-lg-flex justify-content-lg-end" href="#modal-jessica"
                               data-toggle="modal">Más Detalles ...</a></div>
                    </div>

                    <!-- Slider Three Section I -->
                    <div id="slider-three-section-I" class="card d-sm-none d-xs-block shadow-sm col-md-5 col-sm-10">
                        <img class="card-img-top w-100 d-block shadow-lg rounded-circle" src="assets/img/Orange.svg"
                             height="150" width="100" style="max-width: 150px; margin: 10px auto 0 auto">

                        <div class="card-body">
                            <h4 class="text-center card-title">Sebastian García</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                            <a class="card-link d-lg-flex justify-content-lg-end" href="#modal-sebastian"
                               data-toggle="modal">Más Detalles ...</a></div>
                    </div>

                    <!-- Slider Four Section I -->
                    <div id="slider-four-section-I" class="card d-sm-none d-xs-block shadow-sm col-md-5 col-sm-10">
                        <img class="card-img-top w-100 d-block shadow-lg rounded-circle" src="assets/img/Red.svg"
                             height="150" width="100" style="max-width: 150px; margin: 10px auto 0 auto">

                        <div class="card-body">
                            <h4 class="text-center card-title">Juan Djordjevick</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                            <a class="card-link d-lg-flex justify-content-lg-end" href="#modal-juan"
                               data-toggle="modal">Más Detalles ...</a></div>
                    </div>

                    <!-- Slider Five Section I -->
                    <div id="slider-five-section-I" class="card d-sm-none d-xs-block shadow-sm col-md-5 col-sm-10">
                        <img class="card-img-top w-100 d-block shadow-lg rounded-circle" src="assets/img/Yellow.svg"
                             height="150" width="100" style="max-width: 150px; margin: 10px auto 0 auto">

                        <div class="card-body">
                            <h4 class="text-center card-title">Cesar Lizarazo</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                            <a class="card-link d-lg-flex justify-content-lg-end" href="#modal-cesar"
                               data-toggle="modal">Más Detalles ...</a></div>
                    </div>

                    <!-- Button Slider Next Section I -->
                    <a class="carousel-control-next d-none d-sm-flex" style="transform: translateX(10px)"
                       onclick="nextSliderSectionI()">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>
            </div>
        </div>

    </div>

    <div class="accordion" id="accordion-project">

        <header>
            <div class="card">
                <h6 class="shadow-sm card-header">
                    <button type="button" class="btn btn-link text-white"
                            data-toggle="collapse"
                            data-target="#section-project">
                        Proyectos Actuales
                    </button>
                </h6>
            </div>
        </header>

        <div id="section-project" class="row collapse" data-parent="#accordion-project" style="margin-top: 10px;">

            <div id="carousel-project" class="carousel slide" data-ride="carousel">

                <!-- Carousel indicators -->
                <ol class="carousel-indicators" style="transform: translateY(35px)">
                    <li data-target="#carousel-project" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-project" data-slide-to="1"></li>
                    <li data-target="#carousel-project" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for carousel items -->
                <div class="carousel-inner col-10 offset-1">
                    <!-- Slider One Section II -->
                    <div id="slider-one-section-II" class="carousel-item active card shadow-sm">
                        <div class="card-body">
                            <img class="shadow float-left" src="assets/img/Orange.svg" height="200px"
                                 style="margin-right: 20px;margin-bottom: 15px;">
                            <h4 class="card-title">Title</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                        </div>
                    </div>

                    <!-- Slider Two Section II -->
                    <div id="slider-two-section-II" class="carousel-item card shadow-sm">
                        <div class="card-body">
                            <img class="shadow float-left" src="assets/img/Green.svg" height="200px"
                                 style="margin-right: 20px;margin-bottom: 15px;">
                            <h4 class="card-title">Title</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                        </div>
                    </div>

                    <!-- Slider Three Section II -->
                    <div id="slider-three-section-II" class="carousel-item card shadow-sm">
                        <div class="card-body">
                            <img class="shadow float-left" src="assets/img/Red.svg" height="200px"
                                 style="margin-right: 20px;margin-bottom: 15px;">
                            <h4 class="card-title">Title</h4>
                            <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio,
                                dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
                                metus.</p>
                        </div>
                    </div>
                </div>

                <!-- Carousel controls -->
                <a class="carousel-control-prev" href="#carousel-project" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>

                <a class="carousel-control-next" href="#carousel-project" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>

            </div>

        </div>

    </div>

    <!-- Toast -->
    <div style="position: absolute; top: 10px; right: 10px">

        <!-- Toast for show the technology used-->
        <div class="toast" id="toast-bootstrap" data-delay="1500">
            <div class="toast-header">
                <strong class="mr-auto">Technologies used</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
            </div>
            <div class="toast-body text-dark">
                Design with help of Bootstrap 4.
            </div>
        </div>

        <!-- Toast for show the architect (Joan Buriticá)-->
        <div class="toast" id="toast-architect" data-delay="1500">
            <div class="toast-header">
                <strong class="mr-auto">The Architect</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
            </div>
            <div class="toast-body text-dark">
                Written by Joan Andrés Buriticá Salazar.
            </div>
        </div>

    </div>

    <!-- Modals -->
    <div id="modal-joan" role="dialog" tabindex="-1" class="modal fade show">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Developer Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="float-right text-center" style="margin-right: 10px">
                        <strong>Joan Buriticá</strong><br><br>
                        <i>Architect of Dreams</i><br><br>
                        <p>Software Engineering<br>
                            University Santiago de Cali<br>
                            Santiago de Cali, 2020</p>
                    </div>
                    <img style="margin-left: 30px; margin-top: 15px" class="rounded-circle" src="assets/img/Blue.svg"
                         height="150" width="150">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-jessica" role="dialog" tabindex="-1" class="modal fade show">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Developer Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="float-right text-center" style="margin-right: 10px">
                        <strong>Jessica Malzuera</strong><br><br>
                        <i>Architect of Dreams</i><br><br>
                        <p>Software Engineering<br>
                            University Santiago de Cali<br>
                            Santiago de Cali, 2020</p>
                    </div>
                    <img style="margin-left: 30px; margin-top: 15px" class="rounded-circle" src="assets/img/Green.svg"
                         height="150" width="150">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-sebastian" role="dialog" tabindex="-1" class="modal fade show">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Developer Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="float-right text-center" style="margin-right: 10px">
                        <strong>Sebastian García</strong><br><br>
                        <i>Architect of Dreams</i><br><br>
                        <p>Software Engineering<br>
                            University Santiago de Cali<br>
                            Santiago de Cali, 2020</p>
                    </div>
                    <img style="margin-left: 30px; margin-top: 15px" class="rounded-circle"
                         src="assets/img/Orange.svg" height="150" width="150">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-juan" role="dialog" tabindex="-1" class="modal fade show">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Developer Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="float-right text-center" style="margin-right: 10px">
                        <strong>Juan Djordjevick</strong><br><br>
                        <i>Architect of Dreams</i><br><br>
                        <p>Commercial Engineering<br>
                            University Santiago de Cali<br>
                            Santiago de Cali, 2020</p>
                    </div>
                    <img style="margin-left: 30px; margin-top: 15px" class="rounded-circle" src="assets/img/Blue.svg"
                         height="150" width="150">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-cesar" role="dialog" tabindex="-1" class="modal fade show">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Developer Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="float-right text-center" style="margin-right: 10px">
                        <strong>Cesar Lizarazo</strong><br><br>
                        <i>Architect of Dreams</i><br><br>
                        <p>Software Engineering<br>
                            University Santiago de Cali<br>
                            Santiago de Cali, 2020</p>
                    </div>
                    <img style="margin-left: 30px; margin-top: 15px" class="rounded-circle"
                         src="assets/img/Orange.svg" height="150" width="150">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button">Save</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/sliderTeam.js"></script>

</body>

</html>